<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>车辆信息</title>
    <link rel="stylesheet" href="css/base.css?v=201709082019">
    <style type="text/css">
        .queryText2 {
            font-size: 12px;
            height: 20px;
        }

        .finishBtn i {
            display: block;
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius: 50%;
            box-shadow: 0 7px 14px #91c5ff;
            background: url('img/qrcode1.png') no-repeat;
            background-size: 28.95px 20px;
            background-position: center;
            background-color: #91c5ff;
        }

        #exitGroup {
            margin-top: 10px;
            position: fixed;
            bottom: 10px;
            right: 20px;
            background-color: #44a4ff;
            font-size: 10px;
            z-index: 10;
            opacity: 0.5;
        }

        #cardMsg {
            margin-top: 20px;
            margin-bottom: 80px;
        }

        .finishBtn {
            position: fixed;
        }

        body {
            background: #f7f7f7;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/sig.js"></script>
    <script type="text/javascript" src="js/handle.js"></script>
    <script type="text/javascript" src="js/ask.js"></script>
</head>
<body>
<div id="info"></div>
<div class="delay_readcard top20 bgf7">

    <div class="delay_readcard_top query_card_box" id="cardMsg">
        <h3 class="query_atradebal" id="orgState">
            <span id="plateId"></span>
        </h3>
        <h1 id="orgMark" class="query_num"></h1>

        <h3 id="delayType" class="query_type"></h3>

        <h5 class="queryText2">
            所属城市 · <span id="city"></span>
        </h5>
        <h5 class="queryText2">
            档案号 · <span id="dossier"></span>
        </h5>
        <h5 class="queryText2">
            车主 · <span id="owner"></span>
        </h5>
        <h5 class="queryText2">
            车架号 · <span id="vin"></span>
        </h5>
        <h5 class="queryText2">
            发动机号 · <span id="engineNo"></span>
        </h5>
        <h5 class="queryText2">
            注册时间 · <span id="register"></span>
        </h5>
        <h5 class="queryText2">
            年检时间 · <span id="inspectTime"></span>
        </h5>
        <h5 class="queryText2">
            所属用户 · <span id="memberNum"></span>
        </h5>
        <h5 class="queryText2">
            邮箱 · <span id="email"></span>
        </h5>
        <h5 class="queryText2">
            联系电话 · <span id="mobile"></span>
        </h5>
    </div>
    <div class="delay_readcard_finish">
        <div class="finishBtn">
            <i></i>
        </div>
    </div>
    <hr class="query_divide">
    <div class="query_result_body">
        <h2 class="query_result_top">
            <i class="wallet_icon"></i>
            违章信息
            <span>
				<i class="time_icon"></i>
				查询记录
			</span>
        </h2>
        <h3 class="query_result_btm">
            <p class="load-normal ">
                <i id="amountBalance"></i>
                <span id="amountDate"></span>
            </p>
            <p class="load-error errorLoad" style="display:none">加载异常！</p>

        </h3>
    </div>
</div>
<span id="exitGroup" class="query_enddate circular_red">#</span>
<div class="mask_layer none">
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none"></div>
<div class="loading" style="display:none">
    <img src="img/loading.gif"></div>
<script type="text/javascript">
    var vehicleId = "${vehicleId}";
    var memberNum = "${memberNum}";
    var textQr = "http://qr.topscan.com/api.php?text=SHARE_VEHICLE_";
    $(function () {
        getVehicleInfo(vehicleId);

        $("#exitGroup").on('click', function (e) {

        })

        $(".finishBtn i").click(function () {
            var text = '<div class="alert-box-with-btn">'
            var imgUrl = textQr + vehicleId + "?fromUser=" + memberNum;
            console.log(imgUrl);
            text += '<img src="' + imgUrl + '">'
            text += '<p class="alert-box-btn">使用公众号内扫一扫菜单</p>'
            text += '</div>'
            $(".mask_layer").append(text).removeClass('none');
        })
        $(".mask_layer").click(function () {
            $(".mask_layer, .mask_layer > div").addClass('none');
        })
    })

    function getVehicleInfo(id) {
        var data = {
            vehicleId: id
        };
        $(".loading").show();
        $.ajax({
            url: $.httpRootPath() + 'rest/driver/vehicle/info/' + id,
            type: 'GET',
            data: data,
            dataType: 'json',
            timeout: 15000,
            success: function (r) {
                console.log(r)
                $(".loading").hide();
                if (r.code == "00") {
                    var obj = r.data;
                    if (r.code == '00') {
                        if (r.data.picture != "") {
                            $('#filePicker').attr('src', r.data.picture);
                        }
                        $("#vin").html(obj.vin);
                        $("#city").html(obj.city);
                        $("#memberNum").html(obj.memberNum);
                        $("#plateId").html(obj.plate);
                        $("#dossier").html(obj.dossier);
                        $("#register").html(obj.register);
                        $("#email").html(obj.email);
                        $("#engineNo").html(obj.engineNo);
                        $("#inspectTime").html(obj.inspectTime);
                        $("#mobile").html(obj.mobile);
                        $("#owner").html(obj.owner);
                        $("#amountBalance").html(obj.wzFen + '分' + obj.wzMoney + '元');
                        $("#amountDate").html(obj.wzUpdateTime);
                    }
                } else {
                    errorToast("获取信息失败:" + r.msg, 3)
                }
            },
            error: function (e) {
                $(".loading").hide();
                ajaxErrorEvent(e);
            }
        });
    }

</script>
<script type="text/javascript">
    var jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage'];
    getSignature(jsApiList, function () {
        shareMemberInfo(memberNum, memName, "${fromUser}", memImgUrl);
    })
</script>
</body>
</html>